<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JS操作iframe</title>
<link rel="stylesheet" href="styles.css" type="text/css"/>
</head>
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
<div class="titlepage">
  <center>
    <h2 class="title">JS操作iframe</h2>
  </center>
  参考网址：<br />
  <a href="http://www.cnblogs.com/rainman/archive/2011/02/16/1956431.html">http://www.cnblogs.com/rainman/archive/2011/02/16/1956431.html</a><br />
<a href="http://blog.163.com/codewin@126/blog/static/173669443201231152319351/">http://blog.163.com/codewin@126/blog/static/173669443201231152319351/</a></div>
<div class="toc">
  <p><b>目录</b></p>
  <dl>
    <dt><span class="sect1"><a href="#part01">1. 获得iframe的window对象(从父到子)</a></span></dt>
    <dt><span class="sect1"><a href="#part02">2. 获得iframe的document对象(从父到子)</a></span></dt>
    <dt><span class="sect1"><a href="#part03">3. iframe中获得父页面的window对象(从子到父)</a></span></dt>
  </dl>
</div>
<p style="margin:20px;">
关于使用jQuery方式操作iframe，请另参见[<a href="../jQuery/jquery_do_iframe.html">jQuery操作iframe</a>] </p>
<div id="part01" class="sect1">
  <div class="titlepage">
    <div>
      <div>
        <h2 class="title" style="clear: both">1. 获得iframe的window对象(从父到子)</h2>
      </div>
    </div>
  </div>
  <p>存在跨域访问限制。<br/>
    IE：iframeElement.contentWindow或iframeElement.contentDocument.parentWindow<br/>
    Firefox： iframeElement.contentWindow<br/>
    Chrome：iframeElement.contentWindow</p>
  <p>示例代码：在父页面访问iframe的window对象</p>
  <pre class="screen">
function getIframeWindow(){
	iframeElement = document.getElementById(&quot;myfram&quot;);
	//alert(iframeElement.contentWindow.b);//在Chrome跨域访问为undefined
	return iframeElement.contentWindow;
}</pre>
</div>
<div id="part02" class="sect1">
  <div class="titlepage">
    <div>
      <div>
        <h2 class="title" style="clear: both">2. 获得iframe的document对象(从父到子)</h2>
      </div>
    </div>
  </div>
  <p>存在跨域访问限制。<br/>
    IE：iframeElement.contentWindow.document或iframeElement.contentDocument<br/>
    Firefox： iframeElement.contentDocument<br/>
    Chrome：iframeElement.contentDocument</p>
  <p>示例代码：在父页面访问iframe的document对象</p>
  <pre class="screen">
function getIframeWindow(){
	iframeElement = document.getElementById(&quot;myfram&quot;);
	//alert(iframeElement.contentDocument);//在Chrome跨域访问为null
	return  iframeElement.contentDocument || iframeElement.contentWindow.document;
}</pre>
</div>
<div id="part03" class="sect1">
  <div class="titlepage">
    <div>
      <div>
        <h2 class="title" style="clear: both">3. iframe中获得父页面的window对象(从子到父)</h2>
      </div>
    </div>
  </div>
  <p>存在跨域访问限制。<br/>
    父页面：window.parent<br/>
    顶层页面：window.top<br/>
    适用于所有浏览器 </p>
  <p>示例代码：iframe中获得父页面的window对象</p>
  <pre class="screen">
function getParentWindow(){
	return  window.parent;
}</pre>
</div>


</body>
</html>
